<template>
	<div class="chartNum">
		<div class="box-item">
			<li :class="{'number-item':!isNaN(item),'mark-item':isNaN(item)}" v-for="(item,index) in orderNum"
				:key="index">
				<img src="../../assets/light.png" alt="" class="light" />
				<span v-if="!isNaN(item)">
					<i ref="numberItem">0123456789</i>
				</span>
				<em class="comma" v-else>{{item}}</em>
			</li>
		</div>
	</div>
</template>

<script>
	export default {
		name: "hChartNum",
		props: {
			num: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				orderNum: [], // 默认订单总数
			}
		},
		mounted() {
			this.toOrderNum(this.num) // 这里输入数字即可调用
		},
		methods: {
			// 设置文字滚动
			setNumberTransform() {
				const numberItems = this.$refs.numberItem // 拿到数字的ref，计算元素数量
				const numberArr = this.orderNum.filter(item => !isNaN(item))
				// 结合css，让文字滚动起来
				for (let index = 0; index < numberItems.length; index++) {
					const elem = numberItems[index];
					elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`
				}
			},

			// 处理订单数字
			toOrderNum(num) {
				num = num.toString();
				if (num.length < 3) {
					const numlist = `0${num}`; // 如未满固定数，添加"0"补位
					this.toOrderNum(numlist); // 递归添加"0"补位
				} else {
					this.orderNum = num.split('')
				}
				setTimeout(() => {
					this.setNumberTransform();
				}, 500);
			}
		}
	}
</script>

<style scoped lang="scss">
	
	.box-item {
		position: relative;
		font-size: 48px;
		text-align: center;
		list-style: none;
		color: #fff;
		writing-mode: vertical-lr;
		text-orientation: upright;
		-moz-user-select: none;
		-webkit-user-select: none;
		/*webkit浏览器*/
		-ms-user-select: none;
		/*IE10*/
		-khtml-user-select: none;
		/*早期浏览器*/
		user-select: none;
		margin: 0 auto;
		font-family: 'DIN-Bold';
		text-shadow: 0px 0px 3px #18D5FEBD;
	}

	/*滚动数字设置*/
	.number-item {
		list-style: none;
		width: 46px;
		height: 44px;
		padding: 4px 0 6px;
		border: 1px solid rgba(0, 194, 255, 0.35);
		border-radius: 6px;
		margin: 0 4px;
		position: relative;
		

		&>span {
			position: relative;
			display: block;
			writing-mode: vertical-rl;
			height: 100%;
			width: 100%;
			text-orientation: upright;
			overflow: hidden;
			z-index: 2;


			&>i {
				font-style: normal;
				position: absolute;
				top: -5px;
				left: 50%;
				transform: translate(-50%, 0);
				transition: transform 1s ease-in-out;
			}
		}
		
		&::after{
			position: absolute;
			content: '';
			left: 0;
			right: 0;
			bottom: 0;
			height: 50%;
			background-color: #006FFF;
			border-radius: 0 0 5px 5px;
		}
		
		.light{
			position: absolute;
			left: -2px;
			top: -8px;
		}
	}
	
	
	.mark-item{
		width: 30px;
		position: relative;
		
		
		.light{
			display: none;
		}
		
		.comma{
			width: 100%;
			display: block;
			line-height: 1;
			font-size: 42px;
			font-style: inherit;
			
			margin-left: -10px;
		}
	}
	
	


</style>